<template>
  <el-container>
    <el-aside class="photo">
      <img
        v-if="list.details != undefined"
        :src="src + list.details.image"
        alt=""
        style="width: 100%; height: 99%"
      />
    </el-aside>
    <el-main>
      <div class="data">
        <h1 class="name">{{ list.name }}</h1>
        <p class="intro">简介:{{ list.msg }}</p>
        <p class="store" v-if="list.merchant != undefined">
          {{ list.merchant.name }}
        </p>
        <div class="price" v-if="list.specifications != undefined">
          <span>{{ list.specifications[0].price }}</span>
        </div>
        <div class="pro-list">
          <span class="pro-name">{{ list.name }}</span>
          <p class="price-sum" v-if="list.specifications != undefined">
            总计:{{ list.specifications[0].price }}元
          </p>
        </div>
        <div class="button">
          <a href="javascript:void(0);" @click="shopcart(list)" >
            <el-button type="button" class="shop">
              <span>加入购物车</span>
            </el-button>
          </a>
          <a href="/collect">
            <el-button type="button" class="like">
              <span>收藏</span>
            </el-button>
          </a>
        </div>
        <div class="pro-policy">
          <ul>
            <li>
              <i class="el-icon-circle-check"></i>
              顺丰包邮
            </li>
            <li>
              <i class="el-icon-circle-check"></i>
              七天无理由退货
            </li>
            <li>
              <i class="el-icon-circle-check"></i>
              七天价格保修
            </li>
          </ul>
        </div>
      </div>
      <div
      class="details"
      v-if="list.details != undefined"
      v-html="list.details.word"
    ></div>
    </el-main>  
  </el-container>
</template>
<script>
import { getById } from "../api/product.js";
import { getUserId } from "../utils/auth.js" ;

export default {
  data() {
    return {
      list: [],
      src: "http://localhost:5000" + "/files/picPath?picUrl=",

    };
  },
  methods: {
    tocollect() {
      this.$router.push("collect");
    },
    details() {
      getById(this.id)
        .then((res) => {
          console.log(res);
          this.list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    

    //加入购物车 传入商品id与用户的id
    shopcart() {
      

    }
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log( this.id,'该商品的id');
    this.details();
    this.userid = getUserId();
    console.log(this.userid,'当前用户的id');
  },
};
</script>
<style>
.el-container {
  min-height: 40vw !important;
}
.el-main {
  margin: 10px !important;
}

.photo {
  width: 450px !important;
  height: 490px;
  margin-left: 70px;
  margin-top: 10px;
  float: left;
}
/* 详情资料 */
.data {
  float: left;
  margin-left: 50px;
  width: 640px !important;
}
.name {
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}
.intro {
  color: #b0b0b0;
  padding-top: 10px;
}
.store {
  color: #ff6700;
  padding-top: 10px;
}
.price {
  display: block;
  font-size: 18px;
  color: #ff6700;
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0 25px;
}

.pro-list {
  background: #f9f9fa;
  padding: 30px 60px;
  margin: 50px 0 50px;
}
.pro-list span {
  line-height: 30px;
  color: #616161;
}
.pro-price {
  float: right;
}

.price-sum {
  color: #ff6700;
  font-size: 24px;
  padding-top: 20px;
}
.button {
  height: 55px;
  margin: 10px 0 20px 0;
}
.button .el-button {
  float: left;
  height: 55px;
  font-size: 16px;
  color: #fff;
  border: none;
  text-align: center;
}
.button .shop {
  width: 340px;
  background-color: #ff6700;
}
.button .shop:hover {
  background-color: #f25807;
}
.button .like {
  width: 260px;
  margin-left: 40px;
  background-color: #b0b0b0;
}
.button .like:hover {
  background-color: #757575;
}
.pro-policy li {
  float: left;
  margin-right: 20px;
  color: #b0b0b0;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}

</style>
